<template>
  <div class="commodities-list-wrap">
    <div class="commodities-list-search-box">
      <div class="commodities-list-search-input">
        <el-input
          v-model="searchInput"
          size="large"
          placeholder="请输入商品名称"
          :suffix-icon="Search"
        />
      </div>
      <div class="commodities-list-multi-select">
        <el-select-v2
          v-model="value1"
          :options="options"
          placeholder="店铺"
          style="vertical-align: middle"
          allow-create
          filterable
          clearable
          size="small"
        />
        <el-select-v2
          v-model="value2"
          :options="options"
          placeholder="款式"
          style="vertical-align: middle"
          allow-create
          filterable
          clearable
          size="small"
        />
        <el-select-v2
          v-model="value3"
          :options="options"
          placeholder="价格"
          style="vertical-align: middle"
          allow-create
          filterable
          clearable
          size="small"
        />
      </div>
    </div>
    <div class="commodities-list-option-box">
      <div class="commodities-list-switch">
        <el-switch
          v-model="switchBoolean"
          width="60"
          inline-prompt
          active-text="关"
          inactive-text="开"
          style="--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66"
        />
        <div class="commodities-list-swicth-text">已录入</div>
      </div>
      <div class="commodities-list-new">
        <el-select-v2
          v-model="newCommodities"
          :options="options"
          placeholder="新品"
          style="vertical-align: middle"
          allow-create
          filterable
          clearable
          size="small"
        />
      </div>
    </div>
    <div class="commodities-list-box">
      <div class="commoditites-list-box-wrap">
        <div
          class="comodities-list-card"
          v-for="item in commoditiesList"
          :key="item.item_id"
        >
          <van-card
            tag="HOT"
            :price="item.price.toFixed(2)"
            :desc="item.description"
            :title="item.name"
            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
          >
            <template #footer>售卖中</template>
          </van-card>
        </div>
      </div>
    </div>
  </div>
  <div class="commodities-show-wrap">
    <div class="commodities-show-summary">
      <div class="comodities-show-summary-img-box">
        <img
          class="comodities-show-summary-img"
          src="@/img/商品库存/组117@2x.png"
        />
        <div class="comodities-show-summary-prop">商品属性</div>
      </div>
      <div class="comodities-show-summary-box">
        <div class="comodities-show-summary-title">
          <div class="comodities-show-summary-title-text">
            {{ commodityInfo.name }}
          </div>
          <el-tag effect="plain" type="success">售卖中</el-tag>
        </div>
        <div class="comodities-show-summary-price-box">
          价格：
          <span class="comodities-show-summary-price-content"
            >￥{{ commodityInfo.price }}</span
          >
        </div>
        <div class="comodities-show-summary-props-box"></div>
      </div>
    </div>
    <div class="commodities-show-baseInfo">
      <div class="commodities-show-baseInfo-title">基本信息</div>
      <div class="commodities-show-basInfo-content">
        {{ commodityInfo.baseInfo }}
      </div>
    </div>
    <div class="commodities-show-introduction">
      <div class="commodities-show-introduction-title">产品介绍</div>
      <div class="commodities-show-introduction-content">
        {{ commodityInfo.introduction }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Search } from "@element-plus/icons-vue";
import { ref, onMounted, nextTick } from "vue";
import axios from "axios";
import "@/mock/commodity";
import type { commodityItem } from "@/mock/commodity";
import BScroll from "@better-scroll/core";

const searchInput = ref<string>("");

const initials = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
const value1 = ref([]);
const value2 = ref();
const value3 = ref([]);
const options = Array.from({ length: 1000 }).map((_, idx) => ({
  value: `Option ${idx + 1}`,
  label: `${initials[idx % 10]}${idx}`,
}));

const switchBoolean = ref<boolean>(false);
const newCommodities = ref([]);

const commoditiesList = ref<commodityItem[] | []>([]);
const commodityInfo = ref<commodityItem>({} as commodityItem);

onMounted(() => {
  const initPromise = new Promise((resolve) => {
    resolve(getCommoditiesList());
  });
  initPromise.then(() => {
    commodityInfo.value = commoditiesList.value[0];
    console.log(commoditiesList.value[0] as commodityItem);
  });
});
const getCommoditiesList = async () => {
  await axios.post("/api/commodities/list").then((res) => {
    console.log(res);
    commoditiesList.value = res.data;
  });
  await nextTick();
  const scroll = new BScroll(".commodities-list-box", {
    scrollY: true,
    click: true,
  });
};
</script>
<style lang="less" scoped>
.commodities-list-wrap {
  background-color: #fff;
  border-radius: 0.83rem;
  width: 18.9rem;
  height: 100%;
  margin-right: 1rem;

  .commodities-list-search-box {
    padding: 1.38rem 0.65rem;

    .commodities-list-search-input {
      margin-bottom: 1rem;
    }

    .commodities-list-multi-select {
      display: flex;
      justify-content: space-between;

      :deep(.el-select-v2) {
        width: 5rem;
      }
    }
  }

  .commodities-list-option-box {
    width: 100%;
    background-color: #f5f5f5;
    height: 3rem;
    line-height: 3rem;
    padding: 0 0.65rem;
    position: relative;

    .commodities-list-switch {
      display: inline-flex;
      height: 100%;

      .commodities-list-swicth-text {
        height: 2rem;
        line-height: 2rem;
        align-items: center;
        font-size: 1rem;
        margin-left: 0.5rem;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #313033;
      }
      :deep(.el-switch__core) {
        align-items: center;
        width: 3.2rem !important;
        height: 1.4rem;
      }
    }

    .commodities-list-new {
      float: right;
      :deep(.el-select-v2) {
        width: 6.4rem !important;
        height: 1.4rem;
      }

      :deep(.el-select-v2__wrapper) {
        background-color: #f5f5f5;
      }

      :deep(.el-select-v2__placeholder) {
        color: #313033;
      }
    }
  }

  .commodities-list-box {
    margin-top: 1rem;
    height: 48.5rem;
    overflow: hidden;
    background-color: #fff;

    :deep(.van-card) {
      background-color: #fff;
    }

    :deep(.van-tag--primary) {
      background-color: red;
    }

    :deep(.van-card__price) {
      color: red;
    }

    :deep(.van-card__footer) {
      color: #13ce66;
    }
  }
}

.commodities-show-wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;

  .commodities-show-summary {
    width: 100%;
    height: 16.81rem;
    background: #ffffff;
    border-radius: 0.63rem;

    display: flex;
    padding-top: 2.06rem;
    padding-left: 1.69rem;

    .comodities-show-summary-img-box {
      width: 5.31rem;
      height: 100%;
      position: relative;

      .comodities-show-summary-img {
        width: 5.31rem;
        height: 5.31rem;
      }

      .comodities-show-summary-prop {
        position: absolute;
        left: 0.44rem;
        height: 1rem;
        font-size: 1rem;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #313033;
        line-height: 1rem;
      }
    }

    .comodities-show-summary-box {
      flex: 1;
      .comodities-show-summary-title {
        width: 100%;
        line-height: 1.5rem;
        margin-bottom: 1rem;

        .comodities-show-summary-title-text {
          display: inline-block;
          height: 1.5rem;
          font-size: 1rem;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #313033;
          line-height: 1.5rem;
          margin-right: 0.44rem;
        }
      }

      .comodities-show-summary-price-box {
        height: 0.69rem;
        font-size: 0.75rem;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #999999;
        line-height: 0.69rem;
        margin-bottom: 1rem;

        .comodities-show-summary-price-content {
          height: 0.69rem;
          font-size: 0.75rem;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #ff0100;
          line-height: 0.03rem;
        }
      }
    }
  }

  .commodities-show-baseInfo {
    width: 100%;
    height: 16.81rem;
    font-size: 0.88rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
    line-height: 2.25rem;
    background-color: #fff;
    border-radius: 0.63rem;

    .commodities-show-baseInfo-title {
      width: 100%;
      height: 4rem;
      padding-left: 3rem;
      font-size: 1rem;
      line-height: 4rem;
      color: #313033;
      font-family: Microsoft YaHei;
      background-color: #f5f5f5;
      margin-top: 1rem;
      position: relative;
    }
    .commodities-show-baseInfo-title::before {
      content: "";
      position: absolute;
      left: 2rem;
      width: 0.13rem;
      height: 1rem;
      top: 50%;
      transform: translateY(-50%);
      background-color: #313033;
    }

    .commodities-show-basInfo-content {
      padding: 2.38rem 5.5rem 0 4.94rem;

      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .commodities-show-introduction {
    width: 100%;
    height: 24.63rem;
    background: #ffffff;
    border-radius: 0.63rem;
    font-size: 0.88rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
    line-height: 2.25rem;
    flex-basis: 3;

    .commodities-show-introduction-title {
      width: 100%;
      height: 4rem;
      padding-left: 3rem;
      font-size: 1rem;
      line-height: 4rem;
      color: #313033;
      font-family: Microsoft YaHei;
      background-color: #f5f5f5;
      margin-top: 1rem;
      position: relative;
    }

    .commodities-show-introduction-title::before {
      content: "";
      position: absolute;
      left: 2rem;
      width: 0.13rem;
      height: 1rem;
      top: 50%;
      transform: translateY(-50%);
      background-color: #313033;
    }

    .commodities-show-introduction-content {
      padding: 2.38rem 5.5rem 0 4.94rem;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
